<template>
  <view class="box-card">
    <view class="box-card-tab">
      <view
        class="box-card-tab-1"
        :class="activeIndex == 0 ? 'box-card-tab-1-active' : ''"
        @click="tabChange(0)"
        >分类
      </view>
      <view
        class="box-card-tab-1"
        :class="activeIndex == 1 ? 'box-card-tab-1-active' : ''"
        @click="tabChange(1)"
        >品牌
      </view>
    </view>

    <view class="box-card-list">
      <block v-if="activeIndex == 0">
        <view class="box-card-left">
          <view class="contentLeft">
            <view
              class="contentLeftLi"
              :class="tabactive == -1 ? 'contentLeft-active' : ''"
              @click="recommend()"
            >
              推荐</view
            >
            <view
              class="contentLeftLi"
              :class="tabactive == index ? 'contentLeft-active' : ''"
              v-for="(item, index) in contentLeftLis2"
              :key="index"
              @click="tab2(index, item.gc_id)"
            >
              {{ item.gc_name }}
            </view>
          </view>
          <view class="contentRight">
            <block v-if="tabactive == -1">
              <view class="sportList">
                <view
                  @click="toSameproduct(item2)"
                  class="sportList-1"
                  v-for="(item2, index) in secondSort"
                  :key="index"
                >
                  <image :src="item2.gc_image" mode=""></image>
                  <view class="name">
                    {{ item2.gc_name }}
                  </view>
                </view>
              </view>
            </block>
            <block v-else>
              <view v-for="(item, index) in secondSort" :key="index" class="">
                <view class="title">
                  {{ item.gc_name }}
                </view>
                <view class="sportList">
                  <view
                    @click="toSameproduct(item2)"
                    class="sportList-1"
                    v-for="(item2, index2) in item.child"
                    :key="index2"
                  >
                    <image :src="item2.gc_image" mode="aspectFill"></image>
                    <view class="name">
                      {{ item2.gc_name }}
                    </view>
                  </view>
                </view>
              </view>
            </block>
          </view>
        </view>
      </block>
      <block v-if="activeIndex == 1">
        <view style="height: 130rpx"></view>
        <scroll-view
          class="w100"
          scroll-y="true"
          :scroll-into-view="scrollIntoId"
          :style="{ height: scrollHeight }"
          @touchmove.stop.prevent
        >
          <view v-if="searchValue == ''">
            <view v-for="item in list" :id="item.idx" :key="item.idx">
              <view class="letter-header bold">{{ item.idx }}</view>
              <view class="brand-view">
                <view
                  class="brand-icon"
                  v-for="(city, i) in item['cities']"
                  :key="i"
                  @click="toDetail(city)"
                >
                  <!-- <image :src="city.brand_pic" mode="aspectFit" v-if="city.brand_pic!=''"></image> -->
                  <text class="brandName cityName">{{city.brand_name }}</text>
                  <!-- <text class="brandName cityName" v-if="city.brand_pic == ''">{{city.brand_name }}</text> -->
                </view>
              </view>
            </view>
          </view>
          <view class="placeholder footer"></view>
        </scroll-view>
        <!-- 右侧字母 -->
        <view
          class="letters"
          id="list"
          v-if="searchValue == ''"
          @touchstart="touchStart"
          @touchmove.stop.prevent="touchMove"
          @touchend="touchEnd"
        >
          <!-- <view class="fmin" @click="scrollTo('hot')">最近</view> -->
          <view class="fmin" v-for="(i, index) in letter" :key="index">{{
            i
          }}</view>
        </view>

        <!-- 选中之后字母 -->
        <view class="mask" v-if="touchmove">
          <view class="mask-r bold">{{ scrollIntoId }}</view>
        </view>
        <!-- <view class="brand-py">
					<view class="brand-ic">A</view>
					<view class="brand-icon" v-for="(item,index) in brandList" :key="index" @click="toDetail(item)">
						<image :src="item.brand_pic" mode="aspectFit" v-if="item.brand_pic!=''"></image>
						<text class="brandName" v-if="item.brand_pic==''">
							{{item.brand_name}} 
						</text>
					</view>
				</view> -->
        <!-- #ifdef H5 -->
        <!-- <view style="height: 130rpx;"></view> -->
        <!-- #endif -->
      </block>
    </view>
  </view>
</template>

<script>
export default {
  watch: {
    activeIndex: {
      handler(newName, oldName) {
        console.log(999);
        console.log(newName);
        console.log(oldName);
        if (newName == "1") {
          setTimeout(() => {
            this.setList();
          }, 100);
        }
      },
    },
  },
  data() {
    return {
      tabactive: -1,
      activeIndex: 0,
      contentLeftLis2: [],
      secondSort: [],
      brandList: [],
      curpage: 1,
      hasmore: true,
      currentIndex: 0,

      statusBar: "0px",
      customBar: "45px",
      winHeight: 0,
      itemHeight: 0,
      winOffsetY: 0,
      touchmove: false,
      scrollHeight: 0,
      letter: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z",
      ],
      searchValue: "",
      scrollIntoId: "",
      list: [],
      watchData: true,
      loading: false,
    };
  },
  onLoad() {
    this.getFirst();
    this.scrollHeight =
      uni.getSystemInfoSync().windowHeight - parseInt(this.customBar) + "px";
    // console.log(uni.getSystemInfoSync().windowHeight - parseInt(this.customBar))
    //获取存储的最近访问
    // var that = this
    // this.list = Citys.list;
  },
  onShow() {
    this.checkHomeJumpCategory();
  },
  onReachBottom() {
    //下拉加载
  },
  methods: {
    setList() {
      uni
        .createSelectorQuery()
        .in(this)
        .select("#list")
        .boundingClientRect()
        .exec((ret) => {
          console.log(ret);
          this.winOffsetY = ret[0].top;
          this.winHeight = ret[0].height;
          this.itemHeight = this.winHeight / Object.keys(this.list).length;
        });
    },
    touchStart(e) {
      this.touchmove = true;
      let pageY = e.touches[0].pageY;
      let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight);
      console.log(pageY);
      console.log(this.winOffsetY);
      console.log(this.itemHeight);
      console.log(index);
      console.log(this.list);
      if (this.list[index]) {
        this.scrollIntoId = this.list[index].idx;
      }
    },
    touchMove(e) {
      let pageY = e.touches[0].pageY;
      let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight);
      if (this.list[index] && this.list[index].idx === this.scrollIntoId) {
        return false;
      }
      console.log(this.list[index].idx);
      if (this.list[index]) {
        this.scrollIntoId = this.list[index].idx;
      }
    },
    touchEnd() {
      this.touchmove = false;
      this.touchmoveIndex = -1;
    },
    checkHomeJumpCategory() {
      if (this.contentLeftLis2.length > 0) {
        uni.getStorage({
          key: "home_jump_class_page_name_key",
          success: (res) => {
            uni.removeStorage({ key: "home_jump_class_page_name_key" });
            let jumpGcName = res.data;
            console.log("jumpGcName = ", res);
            for (let i = 0; i < this.contentLeftLis2.length; i++) {
              let item = this.contentLeftLis2[i];
              let itemName = item.gc_name;
              if (itemName == jumpGcName) {
                this.tab2(i, item.gc_id);
                break;
              }
              console.log(
                "itemName = " + itemName + " jumpGcName = " + jumpGcName
              );
            }
          },
        });
      }
    },
    tabChange(index) {
      this.activeIndex = index;
      if (index == 1) {
        this.getBrandData();
      }
    },
    //获取一级分类
    getFirst() {
      var that = this;
      uni.showLoading({});
      this.$util
        .request({
          url: "/mobile/index.php?act=goods_class&op=index",
          method: "get",
          data: {},
        })
        .then((res) => {
          uni.hideLoading();
          this.contentLeftLis2 = res.datas.class_list;
          this.recommend();
          this.checkHomeJumpCategory();
        });
    },
    //获取二级分类
    tab2(index, num) {
      var that = this;
      this.secondSort = [];
      this.tabactive = index;
      this.$util
        .request({
          url: "/mobile/index.php?act=goods_class&op=getChildByFirstId",
          method: "get",
          data: {
            firstid: num,
          },
        })
        .then(function (res) {
          that.secondSort = res.datas.goods_class;
        });
    },
    //推荐分类
    recommend() {
      var that = this;
      this.tabactive = -1;
      this.$util
        .request({
          url: "/mobile/index.php?act=goods_class&op=getChildByRecommend",
          method: "get",
          data: {},
        })
        .then(function (res) {
          that.secondSort = res.datas.goods_class;
        });
    },
    //品牌数据
    getBrandData() {
      let that = this;
      this.$util
        .request({
          url: "/mobile/index.php?act=brand&op=list_v3",
          method: "get",
          data: {},
        })
        .then(function (res) {
          if (res.error_code == 0) {
            that.list = res.datas.list;
          }
        });
    },
    toSameproduct(item) {
      uni.navigateTo({
        url:
          "/mall/goods/list?index=" +
          item.gc_name +
          "&firstid=1&secondid=" +
          item.gc_id +
          "&thirdid=" +
          item.gc_id,
      });
    },
    toDetail(item) {
      console.log(item);
      uni.navigateTo({
        url:
          "/mall/goods/list?index=" +
          item.brand_name +
          "&PPID=" +
          item.brand_id,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f5f5f5;
}
.box-card {
  .box-card-tab {
    position: fixed;
    left: 0;
    right: 0;
    background: #ffffff;
    z-index: 99;
    display: flex;

    background-color: #fff;
    padding: 24rpx 0rpx;

    .box-card-tab-1 {
      font-size: 28rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      flex: 1;
      text-align: center;
    }

    .box-card-tab-1-active {
      font-size: 28rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #e96a1d;
      position: relative;
    }

    .box-card-tab-1-active::after {
      position: absolute;
      bottom: -4rpx;
      left: 30%;
      right: 30%;
      height: 2rpx;
      content: "";
      background: #e96a1d;
      border-radius: 6rpx;
    }
  }

  .box-card-list {
    //品牌
    .w100 {
      width: 92%;
    }
    .fsmall {
      font-size: 26rpx;
    }
    .fmiddle {
      font-size: 28rpx;
    }
    .blue {
      color: #007aff;
    }
    .bold {
      /* font-weight: 600; */
      color: #ccc;
      margin: 20rpx 20rpx 20rpx 0;
      line-height: 60rpx;
    }
    .mask {
      position: fixed;
      z-index: 3;
      top: 40%;
      left: 40%;
    }

    .mask-r {
      height: 120rpx;
      width: 120rpx;
      border-radius: 60rpx;
      display: flex;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(5px);
      justify-content: center;
      align-items: center;
      font-size: 40rpx;
      color: #ffffff;
    }

    .content {
      height: 100%;
      width: 100%;
      background-color: #ffffff;
    }

    .header {
      width: 100%;
      position: relative;
      z-index: 8;
      background-color: #ffffff;
    }

    .back_div {
      width: 100rpx;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .back_img {
      width: 35rpx;
      height: 35rpx;
    }

    .input {
      font-size: 26rpx;
      width: 600rpx;
      height: 60rpx;
      max-height: 60rpx;
      border-radius: 10rpx;
      background-color: #f5f5f5;
      padding-left: 20rpx;
      padding-right: 20rpx;
      box-sizing: border-box;
    }

    .title {
      font-size: 30rpx;
      color: white;
    }

    .show {
      left: 0;
      width: 100%;
      transition: left 0.3s ease;
    }

    .hide {
      left: 100%;
      width: 100%;
      transition: left 0.3s ease;
    }

    .title {
      font-size: 30rpx;
      color: white;
    }
    .letters {
	//   display:flex;
      position: absolute;
      right: 10rpx;
      width: 50rpx;
      color: #9e9e9e;
      // background: #F5F8FD;
      top: 20%;
      text-align: center;
      font-size: 24rpx;
      font-weight: 510;
	//   flex-direction: column;
    //   justify-content: center;
	//   height:80%;
    }

    .letters .fmin {
      font-size: 23rpx;
      line-height: 35rpx;
	//   margin-right:20px;
    }

    .letter-header {
      font-size: 28rpx;
      padding-left: 40rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
    }

    .city-div {
      display: inline-block;
      margin: auto;
      padding: 20rpx 0;
      align-items: center;
    }

    .city {
      font-size: 28rpx;
      color: #000000;
      padding-left: 30rpx;
    }

    .contents {
      /* display: flex; */
      background-color: #fff;
    }
    //品牌
    .container {
      display: flex;
      position: fixed;
      justify-content: flex-end;
      right: 0;
    }

    .index-list {
      width: 35rpx;
      background-color: #f7f7f7;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .index-item {
      width: 35rpx;
      height: 35rpx;
      line-height: 35rpx;
      text-align: center;
      border-bottom: 1rpx solid #ccc;
      cursor: pointer;
    }

    .index-item.active {
      background-color: #ddd;
    }
    .brand-py {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-wrap: wrap;
      margin: 0 30rpx 0;
      .brand-ic {
        width: 100%;
      }
      .brand-icon {
        background-color: #fff;
        height: 155rpx;
        flex: 1;
        width: calc((100% - 40rpx) / 3);
        min-width: calc((100% - 40rpx) / 3);
        max-width: calc((100% - 40rpx) / 3);
        margin: 15rpx 20rpx 15rpx 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        image {
          width: 100%;
          height: 100%;
        }

        .brandName {
          font-size: 30rpx;
          color: #000;
          // display: flex;
          // justify-content: center;
          // align-items: center;
          text-align: center;
          flex-wrap: wrap;
          width: 100px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
		.cityName{
		   height:100rpx;
	    }
      }
      
    }
    .brand-view {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-wrap: wrap;
      margin: 0 30rpx 0;

      .brand-icon {
        background-color: #fff;
        height: 155rpx;
        flex: 1;
        width: calc((100% - 40rpx) / 3);
        min-width: calc((100% - 40rpx) / 3);
        max-width: calc((100% - 40rpx) / 3);
        margin: 15rpx 20rpx 15rpx 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        image {
          width: 100%;
          height: 100%;
        }

        .brandName {
          font-size: 30rpx;
          color: #000;
          // display: flex;
          // justify-content: center;
          // align-items: center;
          text-align: center;
          flex-wrap: wrap;
          width: 100px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }

    .brand-icon:nth-child(3n) {
      margin-right: 0;
    }
  }
}

.box-card-left {
  height: 100%;
  display: flex;
  box-sizing: border-box;

  .contentLeft {
    position: fixed;
    top: 180rpx;
    // #ifndef H5
    top: 90rpx;
    // #endif
    left: 0;
    overflow-y: scroll;
    background-color: #ffffff;
    width: 180rpx;
    box-sizing: border-box;
    height: calc(100% - 98rpx);
    padding-bottom: 100px;
  }

  .contentLeftLi {
    width: 180rpx;
    padding: 30rpx 0;
    text-align: center;
    box-sizing: border-box;
    font-size: 28rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #323232;
  }

  .contentLeft-active {
    font-size: 28rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #e24b15 !important;
  }

  .contentRight {
    padding-top: 130rpx;
    width: calc(100vw - 180rpx);
    height: 100%;
    padding-left: 210rpx;
    padding-bottom: 160upx;

    .title {
      font-size: 28rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #323232;
    }

    .sportList {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-wrap: wrap;

      .sportList-1 {
        width: 150rpx;
        margin: 0 30rpx 30rpx 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        .name {
          font-size: 24rpx;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #323232;
          text-align: center;
          margin-top: 10rpx;
          height: 30px;
          line-height: 15px;
        }

        image {
          width: 150rpx;
          height: 150rpx;
          background-color: #fff;
        }
      }
    }
  }
}
</style>